 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>搜班APP</title>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/update.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script> 
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar-nav~.mui-content {
				padding: 0;
			}
			#search {
				width: 80%;
				height: 36px;
                border-radius: 5px;
                background: #fff;
                border: 1px solid #DDDDDD;
                font-size: 14px;
                color: #000;
                padding-left: 10px;
                padding-right:20px; 
                /*margin-left: 20px;*/
                margin-top: 5px;
                /*background:url("images/fdj.png") no-repeat scroll right center transparent;*/ 
                /*background-color:#00CA75 ;*/
                position: absolute;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding: 10px 0;
                border-bottom: 1px solid #ddd;
			}
			.list_more {
				padding: 10px;
				padding-bottom: 60px;
			}
			.list_more p {
				text-align: center;
                padding: 0px 0 0 10px;
                margin: 0;
                background: white;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                color: #83E5AB;
			}
/*菜单样式*/
.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}

.mui-table-view-cell {
	height: 80px;
	padding: 3px 11px;
	font-size:4vw ;
}

		</style>
		<script type="text/javascript" charset="utf-8">
		
             //首页返回键处理
			 //处理逻辑：1秒内，连续两次按返回键，则退出应用；
			var first = null;
			
			mui.back = function() {
					//首次按键，提示‘再按一次退出应用’
					if (!first) {
						first = new Date().getTime();
						mui.toast('再按一次退出应用');
						plus.storage.setItem('userinfo',"");
						plus.storage.setItem('user_id',"");
						plus.storage.setItem('username',"");
						plus.storage.setItem('phone',"");
						plus.storage.setItem('image',"");
						setTimeout(function() {
							first = null;
						}, 1000);
					} else {
						if (new Date().getTime() - first < 1000) {
							plus.runtime.quit();
						}
					}
			};

		mui.plusReady(function() {
			
	        // 隐藏滚动条
            plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
		    //图片轮播，获得slider插件对象
            var gallery = mui('.mui-slider');
            gallery.slider({
                interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
            });
            
            //“更多课程”打开课程列表页面
            document.getElementById('list_more').addEventListener('tap', function() {
                mui.openWindow({
                    url: 'course.html', 
                    id:'course',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
                });
            });  
 
		  
            //进入首页面
            document.getElementById('indexTab').addEventListener('tap', function() {
                mui.openWindow({
                    url: 'index.html', 
                    id:'index',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
                });
            }); 
            //进入社区页面
            document.getElementById('communityTab').addEventListener('tap', function() {
            	mui.openWindow({
                        url: 'community.html', 
                        id:'community',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
                   }); 
            	/*var userinfo = plus.storage.getItem('userinfo');
            	if (userinfo != '' && userinfo != null) {
            		mui.openWindow({
                        url: 'community.html', 
                        id:'community',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
                   }); 
            	} else{
            		mui.openWindow({
                        url: 'login.html', 
                        id:'login',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
                    });
            	}*/
                
            }); 
            
            //进入个人中心页面
            document.getElementById('dataTab').addEventListener('tap', function() {
            	var userinfo = plus.storage.getItem('userinfo');
            	if (userinfo != '' && userinfo != null) {
	                mui.openWindow({
	                    url: 'data.html', 
	                    id:'data',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
	                });
            	} else{
            		mui.openWindow({
                        url: 'login.html', 
                        id:'login',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
                    });
            	}
            }); 
            
		  //定位获取
		  getPosBaidu();
//			alert(123456);
//			alert(lat);
//			alert(longt);
		  
		  	var courseImage ="";
		   mui.ajax({ //ajax请求
					url: getServerIp + 'AppUser/homeHome',
					type: 'GET',
					data: {    
						
					}, //传参
					success: function(data, textStatus, jqXHR) {
						var PicList = data.homes;
						//动态图片 
						document.getElementById("homeImageList").innerHTML = "";
						if(PicList == null){
						}else{
						var cou = PicList.length;
						if(cou > 4){
							cou = 4;
						}
						for(var j = 0;j<cou;j++){
						   var obj = PicList[j];
							if(j == cou-1){
						   		courseImage += '<div class="mui-slider-item mui-slider-item-duplicate">'+
									'<a href="#">'+
										'<img src="'+getServerIp+'/Public/Uploads/image/home/'+obj.image+'" />'+
									'</a>'+
								'</div>';
						   }
					   }
						for(var j = 0;j<cou;j++){
						   var obj = PicList[j];
						   courseImage +='<div class="mui-slider-item">'+
								'<a href="#">'+
									'<img src="'+getServerIp+'/Public/Uploads/image/home/'+obj.image+'" />'+
								'</a>'+
							'</div>';
						}
						for(var j = 0;j<cou;j++){
							var obj = PicList[j];
						   if(j == 0){
						   		courseImage += '<div class="mui-slider-item mui-slider-item-duplicate">'+
									'<a href="#">'+
										'<img src="'+getServerIp+'/Public/Uploads/image/home/'+obj.image+'" />'+
									'</a>'+
								'</div>';
						   }
							
						}
						}
						document.getElementById("homeImageList").innerHTML = courseImage;
					}
					});
					//首页分类
		var ClassNameHtml1 = "";
		var ClassNameHtml2 = "";
		  mui.ajax({ //ajax请求
					url: getServerIp + 'AppCourse/courseType',
					type: 'GET',
					data: {    
						
					}, //传参
					success: function(data, textStatus, jqXHR) {
						//alert(data.courseType.length);
						var courseTypes = data.courseType;
						var cou = courseTypes.length;
						document.getElementById("thisClassName1").innerHTML = "";
						document.getElementById("thisClassName2").innerHTML = "";
						if(cou > 7){
							cou = 7 ;
						}
						for(var j = 0;j<4;j++){
							var obj = courseTypes[j];
							ClassNameHtml1 += '<td class="courseList" data-type="'+obj.id+'" style="text-align: center;width: 20%;height: 20%;">'+
							'<a style="text-decoration: none;">'+
							'<p><img src="'+getServerIp+'/Public/Uploads/image/courseType/'+obj.image+'" style="margin-top: 10%;width: 50%;"/></p>'+
							'<p><font  style="color:black;size: auto;">'+obj.course_type+'</font></p>'+
							'</a></td>';
						}
						document.getElementById("thisClassName1").innerHTML = ClassNameHtml1;
						for(var j = 4;j<7;j++){
							var obj = courseTypes[j];
							ClassNameHtml2 += '<td class="courseList" data-type="'+obj.id+'" style="text-align: center;width: 20%;height: 20%;">'+
							'<a style="text-decoration: none;">'+
							'<p><img src="'+getServerIp+'/Public/Uploads/image/courseType/'+obj.image+'" style="margin-top: 10%;width: 50%;"/></p>'+
							'<p><font  style="color:black;size: auto;">'+obj.course_type+'</font></p>'+
							'</a></td>';
						}
						ClassNameHtml2 += '<td class="courseListAll" data-type="" id="typeMore" style="text-align: center;width: 20%;height: 20%;">'+
						'<a style="text-decoration: none;">'+
						'<p><img src="images/modular_all.png" style="margin-top: 10%;width: 50%;"/></p>'+
						'<p><font  style="color:black;size: auto;">全部分类</font></p>'+
						'</a></td>';
						document.getElementById("thisClassName2").innerHTML = ClassNameHtml2;
						            
            		//模块打开课程列表页面
					  var list = document.getElementsByClassName('courseList');
					  for(var i = 0;i<list.length;i++){
					  	list[i].addEventListener('tap', function() {
			               mui.openWindow({
			                   url: 'course.html', 
			                   id:'course',
			                   extras: {
									type:this.getAttribute("data-type")				
								},
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
			               });
					    });
					  }
											  
			            //更多分类
			            document.getElementById('typeMore').addEventListener('tap', function() {
			                mui.openWindow({
			                    url: 'typeMore.html', 
			                    id:'typeMore',
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
			                });
			            }); 
					}
					});

        });
        //搜索
        function searchs(){
        	var search = $('#search').val();
        	mui.openWindow({
                   url: 'course.html', 
                   id:'course',
                   extras: {
						search:search			
					},
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
               });
        }
function geoInf( position ) {
	var str = "";
//	var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；
//	str += "时间戳："+timeflag+"\n";
	var codns = position.coords;//获取地理坐标信息；
	var lat = codns.latitude;//获取到当前位置的纬度；
	str += "纬度："+lat+"\n";
	var longt = codns.longitude;//获取到当前位置的经度
	str += "经度："+longt+"\n";
	mui.ajax({ //ajax请求
					url: getServerIp + 'AppCourse/courseList',
					type: 'GET',
					data: {    
						lat:lat,longt:longt,renqi:'1'
					}, //传参
					success: function(data, textStatus, jqXHR) {
						document.getElementById('classList').innerHTML = "";
						var table = document.body.querySelector('#classList');
					//	var obj = JSON.parse(data);
					var list =  data.courseList;
					if(list == null){
					}else{
					var list_count = list.length;
					var iii = 15 ;
					if(iii>list_count){
						iii = list_count;
					}
					for(var i = 0;i<iii;i++){
					   var obj = list[i];
    					var li = document.createElement('li');
    					//新增id属性
    					li.id = obj.id;
						li.title=obj.course_name;
							li.className = 'mui-table-view-cell mui-media';
							li.innerHTML = '<a class="mui-navigate-right" style="background:red;height:100px;">'+
						'<img class="mui-media-object mui-pull-left" style="width:60px;" src="'+getServerIp+'/Public/Uploads/image/'+obj.image+'">'+
						'<div class="mui-media-body">'+
							obj.course_name;
							
							if (obj.authentication == "已认证") {
							    li.innerHTML += '<span><img style="height: 20px;" src="images/atta.png" /></span>';
							}else{
								li.innerHTML += '<div style="height: 20px;"></div>';
							}
								
							li.innerHTML +='<div style="padding-bottom: 10px;bottom: 0;">'+
							    '<p class="mui-ellipsis" style="float: left;">收藏&nbsp;' + obj.collection_count + '&nbsp;&nbsp;&nbsp;&nbsp;评价&nbsp;' + obj.comment_count + '</p>'+
							    '<p style="float: right;">'+obj.temp_distance+'km</p>'+
							'</div>'+
						'</div>'+
					'</a>'
					
                        table.appendChild(li);
                        
					}
					//打开课程详情页
					var ls = document.getElementsByClassName('mui-table-view-cell');
							for (var i = 0; i < ls.length; i++) {
								var obj = ls[i];
								obj.addEventListener('tap', function() {
									mui.openWindow({
										url: 'plus/Course/courseDetail.html', 
                                        id:'courseDetail',
										extras: {
											type:this.getAttribute("id"),title:this.getAttribute("title")
										},
	                     waiting:{
                            autoShow:false,//自动显示等待框，默认为true
                          }
									})
								})
							}
							
						}
					}
				});
}
		</script>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<!--<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon " style="float: left;height: 40px;line-height: 40px;"></span>
				<img src="images/logo.png"  style=" height: 40px;"/>
			</button>-->
			<div style="width:15%;height:100%;float:left;"><img src="images/logo.png"  style=" height: 40px;"/></div>
			<input id="search" type="text" placeholder="搜索“舞蹈”试试" /><img src="images/fdj.png" style="float: right;position: relative;margin: 8px;" onclick="searchs();"/>
		</header> 
		<div class="mui-slider" style="margin-top:45px;">
            <div class="mui-slider-group mui-slider-loop" id="homeImageList">
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate"><!--<a href="#"><img src="images/yuantiao.jpg" /></a>--></div>
                <div class="mui-slider-item"><!--<a href="#"><img src="images/cbd.jpg" /></a>--></div>
                <div class="mui-slider-item"><!--<a href="#"><img src="images/muwu.jpg" /></a>--></div>
                <div class="mui-slider-item"><!--<a href="#"><img src="images/shuijiao.jpg" /></a>--></div>
                <div class="mui-slider-item"><!--<a href="#"><img src="images/yuantiao.jpg" /></a>--></div>
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate"><!--<a href="#"><img src="images/cbd.jpg" /></a>--></div>
            </div>
            <div class="mui-slider-indicator">
		        <div class="mui-indicator mui-active"></div>
		        <div class="mui-indicator"></div>
		        <div class="mui-indicator"></div>
		        <div class="mui-indicator"></div>
	        </div>
        </div>
        <table style="width: 100%;background: white;">
			<tr id="thisClassName1">
				<!--<td class="courseList" data-type="1" style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_ty.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">体育运动</font></p>
					</a>
				</td>
				<td class="courseList" data-type="2"  style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_qz.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">亲子早教</font></p>
					</a>
				</td>
				<td class="courseList" data-type="3"  style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_kx.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">科学技术</font></p>
					</a>
				</td>
				<td class="courseList" data-type="4"  style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_ms.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">美术绘画</font></p>
					</a>
				</td>-->
			</tr>
			<tr id="thisClassName2">
				<!--<td class="courseList" data-type="5"  style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_yq.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">乐器演奏</font></p>
					</a>
				</td>
				<td class="courseList" data-type="6"  style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_sy.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">声乐舞蹈</font></p>
					</a>
				</td>
				<td class="courseList" data-type="7"  style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_gx.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">国学书法</font></p>
					</a>
				</td>
				<td class="courseListAll" data-type="" id="typeMore" style="text-align: center;width: 20%;height: 30%;">
					<a style="text-decoration: none;">
						<p><img src="images/modular_all.png" style="margin-top: 10%;width: 70%;"/></p>
						<p><font  style="color:black;size: auto;">全部分类</font></p>
					</a>
				</td>-->
			</tr>
		</table>
		<div class="mui-content" style="background: white;">
			<div class="title">
				<span style="width: 3px;height: 20px;background-color: #83e5ab;"></span>
				<p style="padding: 0px 0 0 10px;margin: 0;">别人家的孩子都在学</p>
			</div>
			<ul id="classList" class="mui-table-view mui-table-view-chevron">
				<!--<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
						<div class="mui-media-body">
							南京JM Dance专业拉丁舞基础班
							<span><img style="height: 20px;" src="images/atta.png" /></span>
							<div style="padding-bottom: 10px;bottom: 0;">
							    <p class='mui-ellipsis' style="float: left;">收藏&nbsp;20&nbsp;&nbsp;&nbsp;&nbsp;评价&nbsp;56</p>
							    <p style="float: right;">3.2km</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
						<div class="mui-media-body">
							南京JM Dance专业拉丁舞基础班
							<div style="padding-bottom: 10px;bottom: 0;">
							    <p class='mui-ellipsis' style="float: left;">收藏&nbsp;30&nbsp;&nbsp;&nbsp;&nbsp;评价&nbsp;16</p>
							    <p style="float: right;">6.2km</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
						<div class="mui-media-body">
							小东家舞蹈班
							<div style="padding-bottom: 10px;bottom: 0;">
							    <p class='mui-ellipsis' style="float: left;">收藏&nbsp;31&nbsp;&nbsp;&nbsp;&nbsp;评价&nbsp;156</p>
							    <p style="float: right;">13.2km</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
						<div class="mui-media-body">
							佳佳艺术体操
							<div style="padding-bottom: 10px;bottom: 0;">
							    <p class='mui-ellipsis' style="float: left;">收藏&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;评价&nbsp;506</p>
							    <p style="float: right;">32.2km</p>
							</div>
						</div>
					</a>
				</li>-->
			</ul>
        </div>
	    <div class="list_more" id="list_more" data-type="">
			<p style="width: 100%; text-align: center; padding: 0px 0 0 10px;margin: 0;">查看全部课程</p>
		</div>
		<nav class="mui-bar mui-bar-tab" style="background: #E4E9EA;">
			<a id="indexTab" class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a id="communityTab" class="mui-tab-item" href="community.html">
				<span class="mui-icon mui-icon-pengyouquan"></span>
				<span class="mui-tab-label">社区</span>
			</a>
			<a id="dataTab" class="mui-tab-item" href="data.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
</html>